<template>
  <a-card title="个人信息">
    <a-card-grid style="width: 25%; text-align: center">
      <a-avatar :size="64">
        <template v-if="userInfo.avatar" #src>
          {{ userInfo.avatar }}
        </template>
        <template v-else #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-card-grid>
    <a-card-grid style="width: 75%">
      <p>{{ welcomeText }}</p>
      <h3>欢迎 {{ userInfo.username }} 回家.</h3>
    </a-card-grid>
  </a-card>
  <a-card title="公司信息">
    <div class="swiper-container">
      <a-carousel autoplay>
        <div v-for="item in productListData" :key="item._id">
          <a-image :src="item.img" />
        </div>
      </a-carousel>
    </div>
  </a-card>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { UserOutlined } from "@ant-design/icons-vue";
import { useUserInfoStore } from "@/store/userInfo";
import { productList } from "@/api/product";
const { userInfo } = useUserInfoStore();
const welcomeText = computed(() => {
  return new Date().getHours > 12 ? "下午好" : "上午好";
});
const productListData = ref([]);
// 获取产品列表
const getProductList = async () => {
  const { data, msg, success } = await productList({
    page: 1,
    pageSize: 10,
  });
  if (success) {
    console.log(data);
    productListData.value = data.row || [];
  } else {
    console.log(msg);
  }
};

onMounted(async () => {
  getProductList();
});
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  background: #fafafa;
  :deep(img) {
    width: 100%;
    height: 300px;
  }
}
</style>